<template>
	<view class="bigDataBox">
		<up-sticky>
		<Header></Header>
		</up-sticky>
		<view class="boxOne">
			<view class="boxOneContent">
				<view class="ContentTitle">
					大数据线索—拓客宝
				</view>
				<view class="ContentTexBox">
					<view class="ContentTex">
						借助大数据技术的应用，实现更加精准的客户获取
					</view>
					<view class="ContentTex">
						从而提高营销效率和客户满意度
					</view>
				</view>
				<view class="ContentBut" @click="handleShowSignup">
					申请试用
				</view>
			</view>
		</view>
		<view class="boxTwo">
			<view class="boxTwo-title">
				大数据+AI
			</view>
			<view class="boxTwoContent">
				<view class="boxTwoContentBox">
					<view class="ContentBox-top">
						<view class="topLeft">
							<view class="topLeft-item">
								<view class="dian">
									.
								</view>
								<view class="item-text">
									大数据精准搜客，一键外呼省时高效
								</view>
							</view>
							<view class="topLeft-item">
								<view class="dian">
									.
								</view>
								<view class="item-text">
									海量线索，关键词精准搜索
								</view>
							</view>
							<view class="topLeft-item">
								<view class="dian">
									.
								</view>
								<view class="item-text">
									智能外呼高效筛选意向客户
								</view>
							</view>
							<view class="topLeft-item">
								<view class="dian">
									.
								</view>
								<view class="item-text">
									对接电话机器人，快速触达用户
								</view>
							</view>
							<view class="topLeft-item">
								<view class="dian">
									.
								</view>
								<view class="item-text">
									意向客户不遗漏，转化更高效
								</view>
							</view>
						</view>
						<view class="topRight">
							<image src="../../static/bigData/bigDataImg2.png" mode=""></image>
						</view>
					</view>
					<view class="ContentBox-bott">
						<view class="bottBox">
							<view class="bottBoxImg">
								<image src="../../static/bigData/bigDataImg3.png" mode=""></image>
							</view>
							<view class="bottBoxText">
								精准匹配各行业用户，让客户更轻松，更高效！
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="boxThree">
			<view class="boxThree-title">
				满足企业个性化需求
			</view>
			<view class="boxThreeContent">
				<view class="cardItem" :class="{'bgTitle' : cardNum == item.id}" @click="handleCard(item)" v-for="item in cardList" :key="item.id">
					<view class="cardItemBox">
						<view class="box-title">
							{{item.content}}
						</view>
					</view>

				</view>
			</view>
		</view>
		
		<view class="boxFour">
			<view class="boxFour-title">
				多场景试用
			</view>
			<view class="boxFourContent">
				<view class="contentItem contentItem1">
					<view class="itemTextBox">
						<view class="itemTitle">
							金融
						</view>
						<view class="itemText">
							金融贷款
						</view>
						<view class="itemText">
							银行催收
						</view>
						<view class="itemText">
							投资理财
						</view>
						<view class="itemText">
							开户邀请
						</view>
					</view>
				</view>
				<view class="contentItem contentItem2">
					<view class="itemTextBox">
						<view class="itemTitle">
							保险
						</view>
						<view class="itemText">
							保险推荐
						</view>
						<view class="itemText">
							客服接待
						</view>
						<view class="itemText">
							客户回访
						</view>
						<view class="itemText">
							续保提醒
						</view>
					</view>
				</view>
				<view class="contentItem contentItem3">
					<view class="itemTextBox">
						<view class="itemTitle">
							电商
						</view>
						<view class="itemText">
							产品促销
						</view>
						<view class="itemText">
							会员关怀
						</view>
						<view class="itemText">
							在线咨询
						</view>
						<view class="itemText">
							提醒通知
						</view>
					</view>
				</view>
				<view class="contentItem contentItem4">
					<view class="itemTextBox">
						<view class="itemTitle">
							教育
						</view>
						<view class="itemText">
							课程销售
						</view>
						<view class="itemText">
							客服接待
						</view>
						<view class="itemText">
							课程试听
						</view>
						<view class="itemText">
							课后回放
						</view>
					</view>
				</view>
				<view class="contentItem contentItem5">
					<view class="itemTextBox">
						<view class="itemTitle">
							政务
						</view>
						<view class="itemText">
							社保服务
						</view>
						<view class="itemText">
							市民热线
						</view>
						<view class="itemText">
							业务咨询
						</view>
						<view class="itemText">
							服务热线
						</view>
					</view>
				</view>
				<view class="contentItem contentItem6">
					<view class="itemTextBox">
						<view class="itemTitle">
							服务
						</view>
						<view class="itemText">
							电话销售
						</view>
						<view class="itemText">
							客户回访
						</view>
						<view class="itemText">
							活动通知
						</view>
						<view class="itemText">
							客服热线
						</view>
					</view>
				</view>
			</view>
		</view>
		<Footer></Footer>
		
		<up-modal :show="showSignUp" @confirm="handleConfirm" title="立即试用" ref="uModal" @cancel="handleClose"
			showCancelButton cancelText="取消" confirmText="立即拨打">
			<view class="hello">
			    <view class="iconfont fa-bodadianhua"></view>
			    <view>电话联系:</view>
			    <view>13261388898</view>
			  </view>
		</up-modal>
	</view>
</template>

<script setup>
	import Header from '../compontents/header.vue'
	import Footer from '../compontents/footer.vue'
	import {
		ref
	} from 'vue'
	import api from '../../utils/request.js'
	const cardList = ref([
		{id:1,content:"集成云计算，大数据，AI等新一代信息技术的创新应用，全网数据采集，包括企业工商全面信息，资质，产品，联系人电话等。"},
		{id:2,content:"地图定位获客，精准定位省/市/区/县，提升拜访效率，提升成单几率。"},
		{id:3,content:"覆盖全国20大类行业，3亿+企业公开商业信息，实现‘找客户-做营销-管客户-报表中心’闭环。"}
	])
	const cardNum = ref(1)
	const handleCard = function(item){
		cardNum.value = item.id
	}
	const showSignUp = ref(false)
	const uToastRef = ref(null)
	const signRefForm = ref(null)
	const handleShowSignup = function() {
		showSignUp.value = true;
	}
	const handleClose = function() {
		showSignUp.value = false;
	}
	const handleConfirm = function() {
	uni.makePhoneCall({
	        phoneNumber: '13261388898', // 电话号码
	        success: function () {
	          console.log('拨打电话成功');
	        },
	        fail: function () {
	          console.log('拨打电话失败');
	        }
	      });
	
	}
</script>

<style scoped lang="scss">
	:deep(.u-form-item__body__left__content__label) {
		font-size: 25rpx;
	}
	
	:deep(.uni-input-placeholder) {
		font-size: 24rpx;
	}
	:deep(.u-input__content__field-wrapper__field){
		height: 0;
	}
	:deep(.u-modal__button-group__wrapper__text){
		font-size: 28rpx;
	}
	:deep(.u-modal__title){
		font-size: 28rpx;
	}
	.hello {
	  width: 100%;
	  height: 60px;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  gap: 10px;
	  font-size: 16px;
	  .fa-bodadianhua {
	    color: #006bec;
	  }
	}
	.bigDataBox {
		width: 100%;
		height: 100%;

		.boxOne {
			height: 371rpx;
			background-image: url('../../static/bigData/bigDataImg1.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 115%;

			.boxOneContent {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				padding-left: 68rpx;

				.ContentTitle {
					font-size: 56rpx;
					font-weight: 600;
					color: #3f3f3f;
				}

				.ContentTexBox {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					color: #909294;
					font-size: 22rpx;
					font-weight: 500;
					gap: 12rpx;
				}

				.ContentBut {
					width: 173rpx;
					height: 58rpx;
					line-height: 58rpx;
					text-align: center;
					color: #fff;
					font-size: 25rpx;
					font-weight: 550;
					background-color: #3f68f5;
					border-radius: 16rpx;
				}
			}
		}

		.boxTwo {
			height: 561rpx;

			.boxTwo-title {
				height: 157rpx;
				line-height: 157rpx;
				text-align: center;
				font-weight: 600;
				font-size: 32rpx;
			}

			.boxTwoContent {
				height: calc(100% - 157rpx);
				padding: 0 20rpx 0 29rpx;

				.boxTwoContentBox {
					display: flex;
					flex-direction: column;
					justify-content: center;
					height: 100%;

					.ContentBox-bott {
						height: 60rpx;
						padding: 0 28rpx;

						.bottBox {
							height: 100%;
							border-radius: 16rpx;
							border: 1rpx solid #eaeff9;
							box-shadow: 0 0 15rpx #eaeff9;
							display: flex;
							justify-content: center;
							align-items: center;
							gap: 17rpx;

							.bottBoxImg {
								width: 53rpx;
								height: 40rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.bottBoxText {
								font-size: 25rpx;
								font-weight: 600rpx;
								color: #395da9;
							}
						}
					}

					.ContentBox-top {
						flex: 1;
						display: flex;
						align-items: center;
						gap: 12rpx;

						.topLeft {
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: center;

							.topLeft-item {
								height: 62rpx;
								line-height: 62rpx;
								border-bottom: 1rpx dashed #eee;
								display: flex;
								gap: 12rpx;

								&:nth-last-child(1) {
									border-bottom: none;
								}

								.dian {
									height: 62rpx;
									line-height: 52rpx;
									font-size: 25rpx;
								}

								.item-text {
									font-size: 25rpx;
								}
							}
						}

						.topRight {
							width: 254rpx;
							height: 239rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}

		.boxThree {
			height: 432rpx;

			.boxThree-title {
				height: 185rpx;
				line-height: 185rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 600;
			}

			.boxThreeContent {
				height: calc(100% - 185rpx);
				padding-left: 20rpx;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				gap: 16rpx;

				.bgTitle {
					transition: all 0.3s;
					width: 233rpx !important;
					height: 218rpx !important;
					padding: 26rpx;
					background:none !important;
					background-color: #4771fa !important;
					color: #fff !important;
					font-size: 22rpx;
					border-radius: 10rpx;
					line-height: 30rpx;
					box-shadow: 0 0 15rpx #ccc;
				}

				.cardItem {
					width: 200rpx;
					height: 200rpx;
					background: linear-gradient(to right, #f8fbfd 0%, #e3f3fd 100%);
					padding: 26rpx;
					background-color: #ebfeff;
					border-radius: 10rpx;
					box-shadow: 0 0 15rpx #ccc;
					background-color: lin;
					.cardItemBox {
						width: 100%;
						height: 100%;

						.box-title {
							width: 100%;
							height: 100%;
							display: flex;
							line-height: 30rpx;
							justify-content: center;
							align-items: center;
							font-size: 21rpx;
						}
					}

				}
			}
		}
		
		.boxFour {
			height: 577rpx;
			.boxFour-title {
				height: 153rpx;
				line-height: 153rpx;
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
			}
			.boxFourContent {
				height: calc(100% - 153rpx);
				// padding: 0 25rpx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				gap: 16rpx;
				.contentItem {
					width: 218rpx;
					height: 163rpx;
					border: 1rpx solid #ccc;
					border-radius: 16rpx;
					position: relative;
					background-repeat: no-repeat;
					background-position: center center; 
					background-size: 130%;

					.itemTextBox {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						gap: 5rpx;
						.itemTitle {
							margin-bottom: 10rpx;
							font-size: 25rpx;font-weight: 600;
							color: #fff;
						}
						.itemText {
							color: #d6d8db;
							font-size: 16rpx;font-weight: 550;
						}
					}
				}
				.contentItem1 {
					background-image: url('../../static/bigData/bigDataImg4.png');
				}
				.contentItem2 {
					background-image: url('../../static/bigData/bigDataImg5.png');
				}
				.contentItem3 {
					background-image: url('../../static/bigData/bigDataImg6.png');
				}
				.contentItem4 {
					background-image: url('../../static/bigData/bigDataImg7.png');
				}
				.contentItem5 {
					background-image: url('../../static/bigData/bigDataImg8.png');
				}
				.contentItem6 {
					background-image: url('../../static/bigData/bigDataImg9.png');
				}
			}
		}
	}
</style>